<template>
  <div>
    <h1>生命周期</h1>
    <p>count:{{count}}</p>
    <input type="button" value="修改count" @click="changeCount">
    <hr />
  </div>
</template>


<script setup>

import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated,onBeforeUnmount,onUnmounted } from "vue";

// 在组合式api中，
// 1、没有beforeCreate和created这两个钩子，曾经在这两个钩子里写的代码，现在直接写在setup函数内部
// 2、钩子函数的执行顺序：
// setup();
// onBeforeMount()
// onMounted()
// onBeforeUpdate();
// onUpdated();

    console.log("setup");

    let count = ref(9);
    function changeCount() {
      count.value++;
    }

    onBeforeMount(() => {
      console.log("onBeforeMount");
    })

    onMounted(() => {
      console.log("onMounted");
    })

    onBeforeUpdate(() => {
      console.log("onBeforeUpdate");
    })

    onUpdated(() => {
      console.log("onUpdated");
    })

    onBeforeUnmount(()=>{
      console.log("onBeforeUnmount：组件销毁前");
    })

    onUnmounted(()=>{
      console.log("onUnmounted：组件销毁后");
    })


</script>

<style scoped>

</style>